<template>
    <div class="containers">
         <!-- 虚化的背景 -->
         <img :src="SongDetails.coverImgUrl" alt="" class="bgimg">
          <!-- 头部 -->
          <div class="ItemDetailstop">
            <img :src="SongDetails.coverImgUrl" alt="" class="bgimgs">
            <div class="left">
                <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
                    <use xlink:href="#icon-zuojiantou-copy"></use>
                </svg>
                <span>歌单</span>
            </div>
            <div class="right">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-Magnifier-copy"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-liebiao2-copy"></use>
                </svg>
            </div>
            </div>
    </div>
      
</template>

<script>

export default {
    name: 'ItemDetailstop',
    // 接收SongDetails组件传来的SongDetailsd的数据
    setup(props){
        // console.log(props);
    },
    props:['SongDetails']
};
</script>

<style lang="scss" scoped>
.containers{
        width: 100%;
        height: 1rem;
        display: flex;
        .bgimg{
            width: 100%;
            height: 7rem;
            position: fixed;
            z-index: -1;
            top: 0px;
            filter: blur(.1rem)
        }
    .ItemDetailstop{
        width: 100%;
        height: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        border-bottom: 0.02rem solid #ccc;
        .bgimgs{
            width: 100%;
            height: 1rem;
            position: fixed;
            z-index: -1;
            top: 0px;
            filter: blur(.1rem)
        }
        .left,.right{
            width: 25%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 .2rem;
        }
        span{
            font-size: .4rem;
            color:#fff;
        }
        .icon{
          //填充
          fill: #fff;
        }
       
    }
}

    
</style>